<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item of arr">
                {{item}}
            </li>
        </ul>
        <!-- 增删元素 -->
        <button @click="beforeArrAdd"> arr前面添加元素</button>
        <button @click="afterArrAdd"> arr后面添加元素</button>
        <!-- 嵌套循环 -->
      
            <ul>
                <li v-for="item of carList">
                    <div>{{item}}</div>
                    <ul>
                        <li v-for="items of item.list">
                            <div>{{items}}</div>
                        </li>
                    </ul>
                </li>
            </ul>
        
            <!-- 通过接口请求数据。循环渲染 -->
            <button @click="getData">获取数据</button>
            <ul>
                <li v-for="item of list" :key="item.proid">
                    {{item.proname}}
                </li>
            </ul>
    </div>
</body>
<script src="./lib/vue.global.js"></script>
<script>
    const {createApp }=Vue 
    createApp({
        data() {
            return {
              arr:[1,2,3,4,5],
              carList:[
                {brand:'玉皇大帝',list:['CT4','CT5','CT6']},
                {brand:'玉皇大帝2',list:['CT44','CT55','CT66']},
                {brand:'玉皇大帝3',list:['CT444','CT555','CT666']},
              ],
              list:''
            }
        },
        methods:{
            beforeArrAdd(){
                this.arr.unshift('e')
            },
            afterArrAdd(){
                this.arr.push('6')
            },
            getData(){
                //fetch 需要先转换成json的格式，再使用
            fetch('http://121.89.205.189:3001/api/pro/list')
            .then(res=>res.json())
            .then(data=>{
                console.log(data)
                this.list=data.data
            })
            }
        }
    }).mount('#app')
</script>
</html>